<template>
    <div>
        <div class="top">
            <span><Icon class="icon" size="30" type="medkit"></Icon></span>
            <span >
                <router-link to="/todayPatient" :style="{color:'#495060'}">
                    <Button type="ghost" ><Icon type="arrow-left-a"></Icon>返回</Button>
                </router-link>

            </span>
        </div>
        <hr>
        <div class="bottom">
            <div class="b_left">
                <img class="img" v-if="datas.sex=='男'" src="http://image.chenliangliang.xin/male-avatar" alt="" />
                <img class="img" v-else src="http://image.chenliangliang.xin/female-avatar" alt="" />
                <p class="name">{{ datas.username }}</p>
                <p>
                    手机号：{{ datas.phone }}
                </p>
                <p>
                    民族：{{ datas.nation }}
                </p>
                <p>
                    性别：{{ datas.sex }}
                </p>
                <p>
                    年龄：{{ datas.age }}
                </p>
                <p>
                    邮箱：{{ datas.email }}
                </p>

            </div>
            <div class="b_right">
                <div>
                    <p>发药</p>
                    <p>
                        <span>开单医生：{{ datas.doctor }}</span>
                        <span>开单时间：{{ datas.updateTime }}</span>
                    </p>
                </div>
                <div class="state">
                    症状：{{ datas.symptom }}
                </div>
                <Table :columns="columns" :data="datas.list"></Table>
                <Button v-if="datas.orderStatus==0" @click="surePay()" class="btn" type="primary">确认缴费</Button>
                <router-link to="/todayPatient" :style="{color:'#495060'}">
                    <Button v-if="datas.orderStatus==0" class="btn" type="ghost" style="margin-left: 8px">取消</Button>
                </router-link>

            </div>
            <div class="clear"></div>

        </div>

    </div>
</template>

<script>
import pharmacy from '../api/pharmacy'
import prescribe from '../api/prescribe'
import surePays from '../api/surePay.js'

export default {
    data () {
        return {
            links:{
                path: "/todayPatient"
            },
            datas:{

            },
            columns: [
                    {
                        title: '组号',
                        key: 'num'
                    },
                    {
                        title: '药品名',
                        key: 'name'
                    },
                    {
                        title: '生产厂家',
                        key: 'provider'
                    },
                    {
                        title: '剂量',
                        key: 'dosage'
                    },
                    {
                        title: '用法',
                        key: 'usage'
                    },
                    {
                        title: '用药频次',
                        key: 'frequency'
                    },
                    {
                        title: '天数',
                        key: 'days'
                    },
                    {
                        title: '说明',
                        key: 'description'
                    },
                    {
                        title: '备注',
                        key: 'qu'
                    },
                ],


        }
    },
    mounted: function () {
        this.getData();
    },
    methods: {
        getData () {
            let id = this.$route.params.id
            // console.log(id)
            // let id = 23
            let date = ''
            prescribe.get(id).then(reps => {
                if(reps.flag){
                    this.datas = reps.data
                }
            })
        },
        surePay () {
            let orderId = this.datas.orderId
            surePays.surePay(orderId).then(({flag,data}) => {
                if(flag){
                    this.$Message.success('已确认');
                    this.$router.push('/todayPatient')
                }
            })
        }
    }

}
</script>

<style>
.clear{
    clear: both;
}
.top{
    width: 100%;
    height: 50px;
}
.top .icon{
    margin-left: 30px;
    float: left;
    line-height: 50px;
}
.top span:nth-child(2){
    float:right;
    line-height: 50px;
    margin-right: 30px;
}
hr{
    height: 2px;
    color: #ccc;
    background-color: #ccc;
    margin-top: 30px;
    border: 0px;
}
.bottom{
    margin-top: 30px;
    width: 100%;

}
.bottom .b_left{
    width: 16%;
    height: 100%;
    float: left;
    background-color: #f5f7f9;
    padding-bottom: 30px;
}
.bottom .b_left img{
    margin-left: 10%;
    margin-top: 30px;
    width: 80%;
}
.bottom .b_left p{
    margin: 10px 0 0 20px;
}
.name{
    font-size: 18px;
    color:black;
    margin: 20px 0 0 20px;
}
.bottom .b_right{
    float:left;
    width: 84%;
    height: auto;
    /* background: #000; */
    padding-left: 20px;
}
.b_right p:nth-child(1){
    font-size: 18px;
}
.b_right p:nth-child(2) span{
    line-height: 50px;
    margin-left: 30%;
}
.state{
    width: 100%;
    height: 60px;
    background-color: #fcf8e3;
    border-color: #faebcc;
    margin: 0 auto;
    padding: 10px;
    line-height: 50px;
    margin-bottom: 20px;
    border-radius: 5px;
}
.btn{
    margin-top: 30px;
}
</style>
